<template>
  <view class="compare_reportSelect_container app_container_page">
    <view class="app_bgwith_wave reportSelect_box">
      <view class="noData" v-if="list.length === 0"> 暂无数据 </view>
      <appReportItem v-for="item of list" :radioMode="{ checked: item.reportId === selectReportId }" :item="item" :key="item.reportId" @REPORT_ITEM_CLICK="handleItemClick" />
    </view>
    <view class="reportSelect_bottom">
      <view @click="handleUnlockClick" class="app_button" v-if="list.length > 0"> ￥{{ price }}解锁对比功能 </view>
    </view>
  </view>
</template>

<script>
import { getReportList, getReportPrice } from '@/api/report'
import { appReportItem } from '@/components/app/app_report_item'
export default {
  name: 'reprotSelect',
  components: {
    appReportItem
  },
  data() {
    return {
      studentId: null,
      selectReportId: null,
      list: [],
      //
      price: ''
    }
  },
  methods: {
    async fetchList() {
      try {
        const res = await getReportList({
          pageNum: 1,
          pageSize: 10000,
          // 查未解锁的
          isLock: '0',
          studentId: this.studentId
        })
        this.list = res.data.list
      } catch (error) {
        console.log(error)
      }
    },
    async fetchReportPrise() {
      try {
        const res = await getReportPrice()
        if (res.code === 200) {
          //
          this.price = res.data.price
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleItemClick(item) {
      // console.log(item)
      this.selectReportId = item.reportId
    },
    async handleUnlockClick() {
      console.log('handleUnlockClick')
      if (this.selectReportId === null) {
        uni.showToast({
          icon: 'none',
          title: '请选择报告'
        })
        return
      }
      // 支付 & go campare detail
      try {
        const res = await this.$uniPromisify.appPayment({
          nonce_str: this.price,
          productId: this.selectReportId,
          productType: 2,
          productName: '专家报告',
          productNum: 1,
          totalPrice: this.price
        })
        console.log('ssss', res)
        if (res && res.errMsg === 'requestPayment:ok') {
          // NOTE: 感觉后端没验证 报告解锁成功与否
          uni.navigateTo({
            url: `/pagesSub/compare/detail?reportId=${this.selectReportId}`
          })
        } else {
          uni.showToast({
            icon: 'none',
            title: res.errMsg
          })
        }
      } catch (error) {
        console.log('pay error', error)
      }
    }
  },
  onLoad(option) {
    this.studentId = option.id

    this.fetchReportPrise()
  },
  onShow() {
    this.fetchList()
  }
}
</script>

<style lang="scss">
.compare_reportSelect_container {
  .reportSelect_box {
    height: calc(100vh - 300rpx);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 30rpx;
  }

  .noData {
    color: #ddd;
    text-align: center;
  }

  .reportSelect_bottom {
    display: flex;
    justify-content: center;
    padding: 100rpx 0;
  }
}
</style>
